<template>
<div>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            unique-opened
            router
        >
            <template v-for="item in itemlist">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span style="color:#606266" slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                v-if="subItem.subs"
                                :index="subItem.index"
                                :key="subItem.index"
                            >
                                <template slot="title">
                                    {{ subItem.title }}
                                </template>
                                <el-menu-item
                                    :class="'/'+$route.path.split('/')[1]==subItem.index?'is-active':''"
                                    style="color:#606266"
                                    v-for="(threeItem,i) in subItem.subs"
                                    :key="i"
                                    :index="threeItem.index"
                                >{{ threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                :class="'/'+$route.path.split('/')[1]==subItem.index?'is-active':''"
                                v-else
                                style="color:#606266"
                                :index="subItem.index"
                                :key="subItem.index"
                            >{{ subItem.title }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index" :class="'/'+$route.path.split('/')[1]==item.index?'is-active':''">
                        <i :class="item.icon"></i>
                        <span style="color:#606266" slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</div>

</template>

<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            itemlist:[],
            collapse: false,
            items: [
// 种植
				// {
				//     icon: 'iconfont icon12',
				//     index: '/digitalMap',
				//     title: '数字地图'
				// },
    //             {
    //                 icon: 'iconfont icon12',
    //                 index: '/base',
    //                 title: '基地管理'
    //             },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/inputs',
				//     title: '投入品管理'
				// },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/plant',
				//     title: '种植管理'
				// },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/recovery',
				//     title: '采收管理'
				// },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/process',
				//     title: '加工管理'
				// },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/examination',
				//     title: '检验检测'
				// },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/subcontract',
				//     title: '分包管理'
				// },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/tagging',
				//     title: '赋码管理'
    //             },
				// {
				//     icon: 'iconfont icon12',
				//     index: '/warehouseManagement',
				//     title: '仓储管理'
				// },
    //             {
    //                 icon: 'iconfont icon12',
				//     index: '/review',
				//     title: '追溯查询'
    //             },
    //             {
    //                 icon: 'iconfont icon12',
				//     index: '/order',
				//     title: '订单管理'
    //             },
// // 中控
// 				{
// 					icon: 'iconfont icon12',
// 					index: '/goverment',
// 					title: '政府客户'
// 				},
// 				{
// 				    icon: 'iconfont icon12',
// 				    index: '/firm',
// 				    title: '企业客户'
// 				},
// 				{
// 				    icon: 'iconfont icon12',
// 				    index: '/agent',
// 				    title: '代理商'
// 				},
// 				{
// 				    icon: 'iconfont icon12',
// 				    index: '/productManagement',
// 				    title: '产品管理'
//                 },
//                 {
// 				    icon: 'iconfont icon12',
// 				    index: '/modelbase',
// 				    title: '模型库'
// 				}
// 养殖
				{
				    icon: 'iconfont icon12',
				    index: '/yzinputs',
				    title: '投入品管理'
				},
				{
				    icon: 'iconfont icon12',
				    index: '/yzbreeding',
				    title: '养殖管理'
				},
				{
				    icon: 'iconfont icon12',
				    index: '/yzmultiply',
				    title: '繁殖管理'
				},
				{
				    icon: 'iconfont icon12',
				    index: '/yzoutput',
				    title: '产出物管理'
				},
				{
				    icon: 'iconfont icon12',
				    index: '/yzantiepidemic',
				    title: '防疫管理'
				},
				{
				    icon: 'iconfont icon12',
				    index: '/yzquarantine',
				    title: '检疫管理'
				},
				{
				    icon: 'iconfont icon12',
				    index: '/yzleave',
				    title: '出场管理'
				},
				{
				    icon: 'iconfont icon12',
				    index: '/yzorder',
				    title: '订单管理'
				}

            ],
            items1:[
                {
                    icon: 'iconfont icon12',
                    index: '/company',
                    title: '企业信息'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/personal',
                    title: '个人中心'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/staffsManagement',
                    title: '员工管理'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/supplier',
                    title: '供应商管理'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/client',
                    title: '客户管理'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/checkingBasis',
                    title: '检测依据'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/processlist',
                    title: '工艺工序'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/products',
                    title: '产品信息'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/grading',
                    title: '分级标准'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/basesource',
                    title: '基原管理'
                },
                {
                    icon: 'iconfont icon12',
                    index: '/maintenance',
                    title: '仓储养护'
                },
                 {
                    icon: 'iconfont icon12',
                    index: '/unit',
                    title: '单位管理'
                },
				 {
                    icon: 'iconfont icon12',
                    index: '/facility',
                    title: '设备管理'
                },

            ],
            items2:[],
            data:[]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
    },
    mounted(){
     this.$store.commit("settzxtsz",this.items1)
        var ide = localStorage.getItem("ide")
        if(ide == "qwe"){
            this.itemlist = this.items1
        }else{
            if(ide == "qqq"){
                this.itemlist = this.items
            }else{
                this.itemlist = this.items2
            }
        }
    },
};
</script>

<style scoped lang="less">
i{
    display: inline-block;
    width:30px;
    text-align: center;
}
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    /* background-color: #fff;*/
}
.sidebar::-webkit-scrollbar {
    width: 64px;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
.el-submenu .el-menu-item{
    padding-left: 52px !important;
}
/* 设置鼠标悬停时sidebar-el-menu的样式 */
.el-tooltip__popper.is-dark{
    span{
        color: #fff !important;
    }
}
// .sidebar-el-menu .el-menu-item:hover{
//     background-color: #E2EFF9 !important;
// }
// .sidebar-el-menu .el-menu-item:hover span{
//     color: #38B2FF !important;
// }
// .sidebar-el-menu .el-menu-item:hover i{
//     color: #38B2FF !important;
// }
.sidebar-el-menu .el-menu-item.is-active{
    color: #409EFF !important;
    background: #ECF5FF !important;
    span{
        color: #409EFF !important;
    }
}
.el-submenu__title .iconfont{
    color: #909399;
    margin: 0 5px 0 3px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle
}
</style>
